<template>
  <div style="background-color: #e6e6e6">
  <el-row class="tac help-menu">
    <div class="main-top">
      <el-card class="box-card">
      <div style="width: 1200px;margin: 0 auto">
        <div class="main-name">星云数据帮助文档</div>
        <div class="main-login" @click="goToMLogin()"><img src="../assets/key.png" style="width:20px;height: 20px"/></div>
      </div>
      </el-card>
      </div>
    <div class="menu-ul">
      <div class="menu-ul-left">
        <el-menu
          :default-active="defaultid"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
           >
          <div v-for="(subItem,index) in menu">
              <el-submenu :index="subItem[0].id"  >
                <template slot="title">
                  <span>{{subItem[0].v_name}}</span>
                </template>
                <div v-for="item1 in subItem[1]">
                  <el-menu-item :index="item1.id" @click="getContent(item1.id)">{{item1.v_name}}</el-menu-item>
                </div>
              </el-submenu>
          </div>

          <el-menu-item index="help" @click="changeRoute()" v-show="user1!=null && user1!=''">
            <!--<i class="el-icon-menu"></i>-->
            <span slot="title" style=" font-size: 18px;color: #333333;font-weight: 500;">编辑菜单</span>
          </el-menu-item>

        </el-menu>
      </div>

      <div class="menu-ul-right" >
        <div style="text-align: left;font-weight: 500;">
              {{position}}
          <div style="border-bottom: 1px solid #efefef;margin-top: 5px"></div>
        </div>
        <div v-html="content"></div>
      </div>

    </div>
  </el-row>
  </div>
</template>
<script>
  export default {
    name: 'main-index',
    data(){
      return {
        menu:[],
        content:"",
        user1:sessionStorage.getItem("user"),
        openeds:[],
        defaultid:'',
        position:'',
        quill:null,
      }
    },
    methods: {
      goToMLogin(){
        this.router.push({ path: '/login' });
      },
      changeRoute(){
        this.router.push({ path: '/menu' });
      },
      getContent(id){
        sessionStorage.setItem("defaultId",id);
        this.$axios.HttpGet({url:"/api/cross/getMenuById"},{id:id})
          .then((data) => {
          this.position=data.data[0].menu.fname+' >> '+data.data[0].menu.v_name;
            this.content=data.data[0].menu.content;
            this.quill.container.firstChild.innerHTML=this.content;
          }).catch((err)=>{
        })
      },
      handleOpen(key, keyPath) {
//        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
//        console.log(key, keyPath);
      }
    },
    created () {

    },
    mounted:function(){
      let defaultMenuId=sessionStorage.getItem("defaultId");
      let vm=this;
      this.$axios.HttpGet({url:"/api/cross/getMenuList"},{})
        .then((data1) => {
          vm.menu=data1.data[0].list;
          for(let i=0;i<vm.menu.length;i++){
            vm.openeds.push(vm.menu[i][0].id);
          }
          let faIndex=0;
          let child=0;
          if(defaultMenuId!=null && defaultMenuId!=''){
            vm.menu.forEach((item,index)=>{
              if(item.length>1){
                item[1].forEach((item1,index1)=>{
                  if(item1.id.toString()===defaultMenuId.toString()){
                    faIndex=index;
                    child=index1;
                  }
                })
              }
            });
          }
          if(data1.data[0].list.length>0){
            vm.$axios.HttpGet({url:"/api/cross/getMenuById"},{id:data1.data[0].list[faIndex][1][child].id})
              .then((data) => {
                vm.position=data.data[0].menu.fname+' >> '+data.data[0].menu.v_name;
                vm.content=data.data[0].menu.content;
                vm.defaultid=data.data[0].menu.id;
              }).catch((err)=>{
            })
          }
//          console.log(global.children1);
        }).catch((err)=>{
//        console.log(err);
      })
    }
  }

</script>
<style>
  .main-top{
    font-size: 30px;
    color: #333333;
    text-align: left;
    font-weight: 800;
    font-family: KaiTi;
    background-color: white;
  }
  .menu-ul{
    width: 1200px;
    margin:0 auto;
    margin-top: 10px;
    list-style:none;
    font-size: 0px;
    /*background-color: white;*/
  }
  .menu-ul-left{
    margin:0px;
    padding:0px;
    width:200px;
    background-color: white;
    display: inline-block;
    min-height: 1000px;
  }
  .menu-ul-right{
    background-color: white;
    font-size: 10px;
    margin:0px;
    width:950px;
    border-radius: 3px;
    margin-left: 10px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    display: inline-block;
    min-height: 980px;
  }
  .el-submenu__title{
    font-size: 18px;
    color: #333333;
    font-weight:600;
    text-align: left;
  }
  .main-name{
    width:300px;
    display: inline-block;
  }
  .main-login{
    position: fixed;
    right: 0px;
    bottom: 0px;
    opacity:0.8;
    width: 20px;
    cursor: pointer;
  }
  .el-menu-item{
    text-align: left;
  }
  .el-menu{
    border-right: none;
  }
  .ql-align-right{
    text-align: right;
  }
  .ql-align-left{
    text-align: left;
  }
  .ql-align-center{
    text-align: center;
  }
  .el-submenu__icon-arrow {
    display: none;
  }
  .el-icon-arrow-down{
  display: none;
 }
 .ql-size-small {
    font-size: 1em;
  }
 .ql-size-large {
    font-size: 2em;
  }

 .ql-size-huge {
    font-size: 3em;
  }
.ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 24em;
  }
 li.ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 25.5em;
  }
  .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 21em;
  }
  li.ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 21.5em;
  }
  .ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 18em;
  }
  li.ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 19.5em;
  }
  .ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 15em;
  }
  li.ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 16.5em;
  }
  .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 12em;
  }
  li.ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 13.5em;
  }
  .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 9em;
  }
  li.ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 10.5em;
  }
  .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 6em;
  }
  li.ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 7.5em;
  }
  .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 3em;
  }
  li.ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 4.5em;
  }
  .ql-indent-9:not(.ql-direction-rtl) {
    padding-left: 27em;
  }
  li.ql-indent-9:not(.ql-direction-rtl) {
    padding-left: 28.5em;
  }
   pre.ql-syntax {
    background-color: #23241f;
    color: #f8f8f2;
    overflow: visible;
  }
</style>
